<template>

  <div style="background-color: white;">
    <!-- <el-checkbox-group size="small"> -->

    <!-- </el-checkbox-group> -->
    <el-row style="padding: 3px; border-bottom: .5px #000000 solid;" type="flex" align="middle">
      <el-col :span="1">
        <div style="padding: 10px;">
          <i v-bind:class="this.$store.getters.sideBar.isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="changeCollapse"
            style="cursor: pointer; font-size: 30px;" />
        </div>
      </el-col>
      <el-col :span="22">
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 10px;">
          <el-breadcrumb-item :to="{ path: '/personalCenter/personInfo' }">店铺概览</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/personalCenter' }">活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb> -->
      </el-col>
      <el-col :span="1">
        <div>
          <el-dropdown @command="handleSelect">
            <span class="el-dropdown-link">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>资料</el-dropdown-item>
              <el-dropdown-item divided command="logOut">登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col size="mini" id="tags">
        <el-tag :key="tag.index" @click="toTagView(tag)" :effect="tag.active?'dark':'plain'" type="success" v-for="tag in this.$store.state.navBar.tags"
          size="mini" @close="handleCloseTag(tag)" :closable="tag.closable">
          {{tag.title}}
        </el-tag>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'navBar',
    data() {
      return {
        tageActive: 'dark',
        tageUnactive: 'dark',
      };
    },
    methods: {
      toTagView(tag) {
        this.$store.commit('CHENGE_ACTIVE_SIDEBAR', tag.index)
        // this.$store.commit('CHENGE_ACTIVE', tag.index)
        this.$router.push({
          path: tag.index
        }).catch(err => {
          // console.log(err)
        })
      },
      handleCloseTag(tag) {
        this.$store.commit('REMOVE_TAG', tag);
      },
      changeCollapse() {
        this.$store.commit('CHANGE_COLLAPSE');
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(command) {
        this.$store.dispatch(command)
      }
    }
  }
</script>
<style>
  .el-tag {
    margin: 0 0.25rem;
    cursor: pointer;
  }

  #tags {
    border-bottom: #000000 solid .5px;
    padding: 0.3125rem;
  }
</style>
